<template>

  <div class="home">
   <div id="demo" class="carousel slide" data-ride="carousel">
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <img class="navbar-brand" src="../img/logo2.jpg" id="a1">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">欢迎{{$store.state.Login.name}}登录</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/">退出登录</a>
    </li>
  </ul>
</nav>
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
       <img src="../img/a.jpg">
    </div>
    <div class="carousel-item">
      <img src="../img/c.jpg">
    </div>
    <div class="carousel-item">
      <img src="../img/d.jpg">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
   </div>


  <div class="container" style="height:100px;width:300px;position: absolute;left:400px;top: 560px;">
    <button type="button" class="btn btn-default btn-lg" style="height:100px;width:300px" @click="tjyy">体检预约
      <br>
      <span class="btn btn-default btn-xs">实时预约</span>
    </button>
  </div>


  <br><br>
  <div class="container" style="height:100px;width:300px;position: absolute;left: 800px;top: 560px;">
    <button type="button" class="btn btn-default btn-lg" style="height:100px;width:300px" @click="bgcx">报告查询
      <br>
      <span class="btn btn-default btn-xs">一键查询</span>
      </button>
  </div>


  <br><br>
  <div class="container" style="height:100px;width:300px;position: absolute;left:400px;top: 700px;">
    
    <button type="button" class="btn btn-default btn-lg" style="height:100px;width:300px" @click="jkpg">健康评估
      <br>
      <span class="btn btn-default btn-xs">了解自身健康</span>
      </button>
  </div>


  <br><br>
  <div class="container" style="height:100px;width:300px;position: absolute;left:800px;top: 700px;">
    <button type="button" class="btn btn-default btn-lg" style="height:100px;width:300px" @click="jkgy">健康干预
      <br>
      <span class="btn btn-default btn-xs">采集状况</span>
      </button>
  </div>
  <br><br>


  <div class="container" style="height:100px;width:300px;position: absolute;left:400px;top: 840px;">
    <button type="button" class="btn btn-default btn-lg" style="height:100px;width:300px" @click="jkda">健康档案
      <br>
      <span class="btn btn-default btn-xs">掌上查询</span>
      </button>
  </div>
  <br><br>


  <div class="container" style="height:100px;width:300px;position: absolute;left:800px;top: 840px;">
    <button type="button" class="btn btn-default btn-lg" style="height:100px;width:300px" @click="jkzx">健康资讯
      <br>
      <span class="btn btn-default btn-xs">资讯一览</span>
      </button>
  </div>
  </div> 
</template>

  <script>

   import axios from 'axios' 
  axios.defaults.baseURL="http://localhost:8085";
  
  export default {
  
    methods:{
    tjyy(){
      this.$router.push('/yuy')
    },
    jkda(){
      this.$router.push('/jkda')
    },
    jkgy(){
      this.$router.push('/jkgy')
    },
    jkpg(){

      this.$router.push('/About/jkpg')
      }
    ,
    jkzx(){
      this.$router.push('/jkzx')
    },
    bgcx(){
      this.$router.push('/About/bgcx')
    }
  }
}
  </script>
<style>
  #a1{
width: 35px;
height: 40px;
}
</style>